<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<script src="/admin/assets/js/jquery-3.5.1.min.js"></script>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<style type="text/css">
			#all{
				margin-top: 200px;
			}
			.all iframe{
				/* border: 2px solid red; */
			}
			#content{
			/* 	border: 1px solid red; */
				width: 1200px;
				margin-top: -80px;
				margin: auto;
			}
			#content .a1{
				float: left;
				margin-left: 10px;
			}
			#content .a1 .big{
				/* float: left; */
				width: 450px;
				height: 400px;
			}
			#content .a11 ul li{
				list-style: none;
				float: left;
				margin: 20px 15px;
			}
			.a11 ul li img{
				border: 3px white solid;
				width: 80px;
				height: 80px;
			}
			.a11 ul li img:hover{
				border: 3px #FF4F0D solid;
			}
			.a2{
				float: left;
				margin-left: 90px;
			}
			.a21 .color{
				color: #758188;
			}
			.a21 .a211{
				background-color: #F2F5F8;
				color: #758188;
			}
			.a21 .a211 .prices,.shic{
				margin-left: 40px;
			}
			.a21 .a211 .prices{
				color: #FF4F0D;
				font-size: 35px;
				font-weight: bold;
			}
			.a21 .a211 .prices2{
				text-decoration: line-through;
			}
			.a21 .a211 .yis{
				margin-left: 230px;
			}
			.a22{
				background-color: #F6F9FB;
			}
			.a22 span,p{
				margin-top: 10px;
			}
			.a22 .neir{
				margin-left: 50px;
			}
			.a25{
				margin-top: 30px;
			}
			.a25 button{
				display: inline-block;
				width: 200px;
				height: 60px;
				border-radius: 30px;
				margin-left: 30px;
			}
			.a25 .a25color1{
				background-color: #FFEEE8;
				color: #FF4F0D;
				font-size: 20px;
				font-weight: bolder;
				border: 1px #FF4F0D solid;
				width: 150px;
				height: 60px;
				text-indent: 1em;
			}
			.a25 .a25color2{
				background-color: #FF4F0D;
				color: white;
				font-size: 20px;
				font-weight: bolder;
				border: 1px #FF4F0D solid;
			}
		</style>
	</head>
	<body>
		<div id="all">
			<div style="clear: both;"></div>
			<div id="content">
					<div class="a1">
						<img class="big" th:src="${details.img}">
					</div>									
				<div class="a2">
					<h2 th:text="${details.name}"></h2>
					<div class="a21">
						<div class="a211">
							<span class="color" >售价</span>
							<span class="prices" th:text="${'￥'+details.price}"></span>
						</div>
						<div class="a22">
							<p></p>
							<span class="color">详情</span>
							<span class="neir" th:text="${details.details}"></span>
						</div>
						<div class="a25">
							<a href="#">
								<select class="a25color1" id="paymentWay">
									<option value="1">余额支付</option>
									<option value="2">积分支付</option>
								</select>
							</a>
							<a href="#"><button class="a25color2" th:onclick="payment([[${details.id}]])">支付</button></a>
							<a href="#"><button class="a25color2" th:onclick="addShoppingCar([[${details.id}]])">加入购物车</button></a>
						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
	<script>
		function addShoppingCar(commodityId) {
			$.ajax({
				url:'/user/addShoppingCar/'+commodityId,
				type:'get',
				datatype:'text',
				success:function (res) {
					alert("添加成功")
				},
				error:function () {
					alert("添加失败")
				}
			})
		}
		function payment(id) {
			let paymentWay=$('#paymentWay').val();
			if (paymentWay==1){
				$.ajax({
					url: '/user/balancePurchase/'+id,
					type: 'get',
					success:function () {
						alert("购买成功")
					},
					error:function () {
						alert("购买失败")
					}
				})
			}else {
				$.ajax({
					url: '/user/pointPurchase/'+id,
					type: 'get',
					success:function () {
						alert("购买成功")
					},
					error:function () {
						alert("购买失败")
					}
				})
			}
		}
	</script>
</html>
 